<template>
  <div class="detail">
    <!-- 公司详情头部模块 -->
    <div class="head">
      <!-- 背景图 -->
      <img :src="'http://hmmm.zllhyy.cn/' + meta.logo" alt="" />
      <!-- 返回 -->
      <van-nav-bar
        left-arrow
        @click-left="$router.push('/company')"
        style="background-color: transparent"
      >
        <template #left>
          <i class="iconfont icon-zuojiantou"></i>
        </template>
      </van-nav-bar>
      <!-- 公司信息 -->
      <div class="info">
        <div class="top">
          <div class="left">
            <h2 class="name">{{ meta.name }}</h2>
            <div class="tag">
              <van-tag plain type="#fff" style="margin: 3px 4px 3px 0">{{
                meta.type
              }}</van-tag>
              <van-tag plain type="#fff" style="margin: 3px 4px">{{
                meta.step
              }}</van-tag>
              <van-tag plain type="#fff" style="margin: 3px 4px">{{
                meta.scale
              }}</van-tag>
            </div>
          </div>
          <!-- 公司logo -->
          <div class="right">
            <img :src="'http://hmmm.zllhyy.cn/' + meta.logo" alt="" />
          </div>
        </div>
        <div class="system">
          <i class="iconfont icon-clock">
            {{ meta.workTime }}
          </i>
          <i class="iconfont icon-kafei">
            {{ meta.restDay }}
          </i>
          <i class="iconfont icon-jiaban">
            {{ meta.overtime }}
          </i>
        </div>
        <div class="welfare">
          <van-tag
            plain
            type="#fff"
            :key="index"
            v-for="(item, index) in meta.weals"
          >
            <i class="iconfont icon-kongxinwujiaoxing"></i>
            {{ item.text }}
          </van-tag>
        </div>
      </div>
    </div>

    <!-- 公司说明模块 -->
    <div class="explain">
      <!-- 地址 -->
      <div class="address">
        <div class="left">
          <h3>公司地址</h3>
          <div class="add">{{ meta.region }} {{ meta.name }}</div>
          <div class="distance">距离当前500m,步行需要57秒</div>
        </div>
        <div class="right">
          <div class="more">全部地址<i class="iconfont icon-xiangyou"></i></div>
          <van-tag
            round
            type="primary"
            color="#b4b4bd"
            text-color="#5b5d75"
            plain
          >
            <i class="iconfont icon-daohanglan"></i>
            导航
          </van-tag>
        </div>
      </div>
      <!-- 简介 -->
      <div class="about">
        <h3>公司简介</h3>
        <p :style="'height:' + moreHeight">{{ meta.desc }}</p>
        <div class="more">
          <span v-if="isDown" @click="doMore">
            展开更多
            <van-icon name="arrow-down" />
          </span>
          <span v-if="isUp" @click="doMore">
            收起显示
            <van-icon name="arrow-up" />
          </span>
        </div>
      </div>
      <!-- 照片 -->
      <div class="photo">
        <h3>公司照片</h3>
        <div class="pic">
          <img
            :src="'http://hmmm.zllhyy.cn/' + item"
            alt=""
            :key="index"
            v-for="(item, index) in meta.sliders"
          />
        </div>
      </div>
      <!-- 工商信息 -->
      <div class="business">
        <h3>工商信息</h3>
        <ul>
          <li><span>公司全称</span> {{ meta.fullname }}</li>
          <li><span>成立时间</span> {{ meta.establishedTime }}</li>
          <li><span>注册资本</span> {{ meta.capital }}</li>
          <li><span>法人代表</span> {{ meta.legalPerson }}</li>
          <li><span>信息来源</span> {{ meta.messageSource }}</li>
        </ul>
      </div>
      <!-- 评价 -->
      <div class="evaluate">
        <div class="title">
          <h3>面试评价</h3>
          <span>写评论</span>
        </div>
        <div class="score">
          <div class="left">
            <span>
              <em class="num">{{ value }}</em>
              <em class="text">分</em>
            </span>
            <van-rate
              v-model="value"
              :size="14"
              color="#ffd21e"
              void-icon="star"
              void-color="#eee"
              readonly
            />
          </div>
          <ul class="right">
            <li>
              <span>岗位描述</span>
              <van-rate
                v-model="meta.positionScore"
                :size="14"
                color="#ffd21e"
                void-icon="star"
                void-color="#eee"
                readonly
              />
            </li>
            <li>
              <span>面试情况</span>
              <van-rate
                v-model="meta.interviewScore"
                :size="14"
                color="#ffd21e"
                void-icon="star"
                void-color="#eee"
                readonly
              />
            </li>
            <li>
              <span>面试官</span>
              <van-rate
                v-model="meta.interviewerScore"
                :size="14"
                color="#ffd21e"
                void-icon="star"
                void-color="#eee"
                readonly
              />
            </li>
          </ul>
        </div>
        <div class="comments" :key="index" v-for="(item, index) in xmp.list">
          <img :src="'http://hmmm.zllhyy.cn/' + item.user.avatar" />
          <div class="contentBox">
            <div class="info">
              <div class="nameBox">
                <div class="left">
                  <span class="name">{{ item.user.nickname }}</span>
                  <span class="post">{{ item.position }}</span>
                </div>
                <div class="star">
                  <van-rate
                    v-model="value"
                    :size="14"
                    color="#ffd21e"
                    void-icon="star"
                    void-color="#eee"
                    readonly
                  />
                </div>
              </div>
            </div>
            <p class="content">{{ item.content }}</p>
            <div class="time">{{ formatTime(item.created_at) }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 适配盒子 -->
    <div class="box" style="height: 5rem; width: 100%"></div>
    <!-- 公司底部模块 -->
    <div class="foot">
      <span>
        在招职位
        <div>{{ meta.positions }}</div>
      </span>
      <span>
        企业面试题
        <div>{{ meta.questions }}</div>
      </span>
    </div>
  </div>
</template>

<script>
// 导入接口
import { companyDetailAPI, companyCommentsAPI } from '@/api/company'

export default {
  name: 'companyDetail',
  data () {
    return {
      meta: { name: '' },
      xmp: [],
      //  拿到地址栏的id
      id: this.$route.params.id,
      isDown: true,
      isUp: false,
      moreHeight: '32vw',
      value: 0
    }
  },
  created () {
    // 初始化渲染
    this.loadData()
    this.commentsData()
  },
  methods: {
    async loadData () {
      const res = await companyDetailAPI(this.id)
      console.log(res)
      this.meta = res.data
      this.value =
        (
          (this.meta.positionScore +
            this.meta.interviewScore +
            this.meta.interviewerScore) /
          3
        ).toFixed(1) * 1
    },
    async commentsData () {
      const res = await companyCommentsAPI(this.id)
      console.log(res)
      this.xmp = res.data
    },
    // 展开收起
    doMore () {
      this.isDown = !this.isDown
      this.isUp = !this.isUp
      if (this.isUp) {
        this.moreHeight = '100%'
      } else {
        this.moreHeight = '32vw'
      }
    },
    // 时间格式
    formatTime (date) {
      return this.dayjs(date).format('YYYY.MM.DD')
    }
  }
}
</script>

<style scoped lang="less">
.van-hairline--bottom:after {
  border-bottom-width: 0px;
}
.detail {
  // 公司详情头部模块
  .head {
    background: #181a39;
    text-align: left;
    padding-top: 10px;
    color: #fff;
    position: fixed;
    overflow: hidden;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 1;
    > img {
      opacity: 0.41;
      filter: blur(18px);
      width: 100%;
      position: absolute;
      left: 0;
      top: 0;
    }
    .iconfont {
      font-size: 25px;
    }
    // 公司信息
    .info {
      .top {
        display: flex;
        padding: 15px 15px 0 15px;
        .left {
          width: 80%;
          .name {
            font-size: 20px;
          }
          .tag {
            margin-top: 8px;
            .van-tag {
              background: transparent;
              opacity: 0.6;
            }
          }
        }
        .right {
          width: 20%;
          margin-right: 10px;
          img {
            width: 80%;
          }
        }
      }

      .system {
        font-size: 12px;
        margin-top: 10px;

        .iconfont {
          padding-left: 15px;
          font-size: 12.5px;
        }
      }
      .welfare {
        font-size: 12px;
        margin-top: 10px;
        padding-left: 15px;
        overflow-x: scroll;
        overflow-y: hidden;
        // 内容不换行
        white-space: nowrap;
        .van-tag {
          background: transparent;
          opacity: 0.6;
          padding: 12px 10px 12px 12px;
          margin-right: 10px;
          .iconfont {
            margin-right: 6px;
            font-size: 18px;
          }
        }
      }
      .welfare::-webkit-scrollbar {
        width: 0 !important;
      }
    }
  }

  // 公司说明模块
  .explain {
    text-align: left;
    margin-top: 65vw;
    padding: 0 13px;

    h3 {
      font-size: 4.8vw;
      font-weight: 400;
      color: #181a39;
      letter-spacing: 0;
    }
    // 地址
    .address {
      display: flex;
      justify-content: space-between;
      .left {
        margin-top: 14px;
        .add {
          font-size: 15px;
          margin-top: -4px;
        }
        .distance {
          font-size: 12px;
          margin-top: 6px;
          margin-bottom: 10px;
          color: #b4b4bd;
        }
      }
      .right {
        margin-top: 8vw;
        .more {
          font-size: 14px;
          color: #5b5d75;
          .iconfont {
            font-size: 14px;
          }
        }
        .van-tag {
          margin-top: 27px;
          height: 30px;
          width: 65px;
          justify-content: center;
          font-size: 14px;
          .iconfont {
            font-weight: 700;
          }
        }
      }
    }
    // 简介
    .about {
      margin-top: 28px;
      p {
        overflow: hidden;
        -webkit-line-clamp: 6;
        -webkit-box-orient: vertical;
        font-size: 15px;
      }
      .more {
        text-align: center;
        font-size: 14px;
        color: #545671;
        padding-left: 5px;
        .van-icon {
          color: #b4b4bc;
        }
      }
    }
    // 照片
    .photo {
      .pic {
        overflow-x: scroll;
        overflow-y: hidden;
        // 内容不换行
        white-space: nowrap;
        img {
          height: 80px;
          width: 150px;
          margin-right: 10px;
          border-radius: 10px;
        }
      }
      .pic::-webkit-scrollbar {
        width: 0 !important;
      }
    }
    // 工商信息
    .business {
      ul {
        font-size: 15px;
        li {
          padding-top: 12px;
          span {
            color: #b4b4bd;
            margin-right: 30px;
          }
        }
      }
    }
    // 评价
    .evaluate {
      .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .score {
        display: flex;
        background: #f7f7f7;
        height: 115px;
        justify-content: center;
        align-items: center;
        .left {
          font-size: 14px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          height: 115px;
          justify-content: center;
          align-items: center;
          padding-right: 14px;
          em {
            font-style: normal;
          }
          .num {
            font-size: 32px;
            color: #00b8d4;
          }
        }
        .right {
          padding-left: 25px;
          border-left: 1px solid #d1cccc6b;
          li {
            display: flex;
            align-items: center;
            justify-content: space-between;
            span {
              line-height: 30px;
              margin-right: 23px;
              font-size: 14px;
            }
            .van-rate {
              display: flex;
              flex-wrap: wrap;
            }
          }
        }
      }
      .comments {
        display: flex;
        margin-top: 25px;
        font-size: 14px;
        img {
          border-radius: 50%;
          width: 37px;
          height: 100%;
          margin-right: 10px;
        }
        .contentBox {
          flex: 1;
          .info {
            display: flex;
            align-items: center;
            .nameBox {
              display: flex;
              flex: 1;
              display: flex;
              justify-content: space-between;
              align-items: center;
              .left {
                display: flex;
                flex-direction: column;
                .post {
                  color: #b4b4bd;
                }
              }
            }
          }
          .time {
            color: #b4b4bd;
          }
        }
      }
    }
  }

  // 底部功能盒子
  .foot {
    display: flex;
    height: 65px;
    width: 100%;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    padding-top: 10px;
    span {
      position: relative;
      border: solid 1px #000;
      margin: 0 10px;
      border-radius: 8px;
      width: 100%;
      height: 44px;
      font-size: 14px;
      color: #181a39;
      line-height: 43px;
      background-color: #fff;
      div {
        position: absolute;
        left: 119px;
        top: -10px;
        font-size: 12px;
      }
    }
  }
}
</style>
